<script setup lang="ts">
import { ChevronDown } from "lucide-vue-next";
const props = defineProps<{
  menu: Menu;
  isExpanded?: boolean;
}>();

const expend = ref(props.isExpanded);
</script>

<template>
  <ul>
    <li class="bg-white my-6 p-3">
      <div
        class="flex justify-between items-center cursor-pointer"
        @click="expend = !expend"
      >
        <div class="flex justify-start items-center gap-x-2">
          <div class="text-gray-600">
            <component :is="menu.icon" :size="16" />
          </div>
          <div>{{ menu.label }}</div>
        </div>
        <div class="text-gray-600">
          <ChevronDown />
        </div>
      </div>
      <ul class="px-6 flex flex-col gap-y-1 pt-2" v-if="expend">
        <SideMenuItem v-for="m in menu.children" :menu="m" :key="m.id" />
      </ul>
    </li>
  </ul>
</template>
